:root,
:root[theme-mode="light"] {
  --td-brand-color-1: #d5e7ff;
  --td-brand-color-2: #aacfff;
  --td-brand-color-3: #7fb7ff;
  --td-brand-color-4: #559eff;
  --td-brand-color-5: #2a86ff;
  --td-brand-color-6: #006eff;
  --td-brand-color-7: #0058df;
  --td-brand-color-8: #0042bf;
  --td-brand-color-9: #002da0;
  --td-brand-color-10: #001780;
  --td-warning-color-1: #ffe8d5;
  --td-warning-color-2: #ffd0aa;
  --td-warning-color-3: #ffb97f;
  --td-warning-color-4: #ffa155;
  --td-warning-color-5: #ff8a2a;
  --td-warning-color-6: #ff7200;
  --td-warning-color-7: #df5900;
  --td-warning-color-8: #bf4000;
  --td-warning-color-9: #a02800;
  --td-warning-color-10: #800f00;
  --td-error-color-1: #fbe0e0;
  --td-error-color-2: #f6c1c1;
  --td-error-color-3: #f2a2a2;
  --td-error-color-4: #ee8383;
  --td-error-color-5: #e96464;
  --td-error-color-6: #e54545;
  --td-error-color-7: #cc3842;
  --td-error-color-8: #b42b3f;
  --td-error-color-9: #9c1f3b;
  --td-error-color-10: #831238;
  --td-success-color-1: #d6f4e4;
  --td-success-color-2: #adeac8;
  --td-success-color-3: #84dfad;
  --td-success-color-4: #5cd492;
  --td-success-color-5: #33ca76;
  --td-success-color-6: #0abf5b;
  --td-success-color-7: #09a755;
  --td-success-color-8: #078f50;
  --td-success-color-9: #06774a;
  --td-success-color-10: #055f44;
  --td-gray-color-1: #f3f4f7;
  --td-gray-color-2: #e7eaef;
  --td-gray-color-3: #cfd5de;
  --td-gray-color-4: #b7c1ce;
  --td-gray-color-5: #9eacbe;
  --td-gray-color-6: #8697ad;
  --td-gray-color-7: #6e829d;
  --td-gray-color-8: #60708a;
  --td-gray-color-9: #525e76;
  --td-gray-color-10: #444c63;
  --td-gray-color-11: #363a50;
  --td-gray-color-12: #292c3d;
  --td-gray-color-13: #1e222d;
  --td-gray-color-14: #151822;
  --td-font-white-1: #fff;
  --td-font-white-2: rgba(255, 255, 255, .55);
  --td-font-white-3: rgba(255, 255, 255, .35);
  --td-font-white-4: rgba(255, 255, 255, .22);
  --td-font-gray-1: rgba(0, 0, 0, .9);
  --td-font-gray-2: rgba(0, 0, 0, .6);
  --td-font-gray-3: rgba(0, 0, 0, .4);
  --td-font-gray-4: rgba(0, 0, 0, .25);
  --td-brand-color: var(--td-brand-color-6);
  --td-warning-color: var(--td-warning-color-6);
  --td-error-color: var(--td-error-color-6);
  --td-success-color: var(--td-success-color-6);
  --td-brand-color-hover: var(--td-brand-color-5);
  --td-brand-color-focus: var(--td-brand-color-2);
  --td-brand-color-active: var(--td-brand-color-7);
  --td-brand-color-disabled: var(--td-brand-color-2);
  --td-brand-color-light: var(--td-brand-color-1);
  --td-warning-color-hover: var(--td-warning-color-5);
  --td-warning-color-focus: var(--td-warning-color-2);
  --td-warning-color-active: var(--td-warning-color-7);
  --td-warning-color-disabled: var(--td-warning-color-2);
  --td-warning-color-light: var(--td-warning-color-1);
  --td-error-color-hover: var(--td-error-color-5);
  --td-error-color-focus: var(--td-error-color-2);
  --td-error-color-active: var(--td-error-color-7);
  --td-error-color-disabled: var(--td-error-color-2);
  --td-error-color-light: var(--td-error-color-1);
  --td-success-color-hover: var(--td-success-color-5);
  --td-success-color-focus: var(--td-success-color-2);
  --td-success-color-active: var(--td-success-color-7);
  --td-success-color-disabled: var(--td-success-color-2);
  --td-success-color-light: var(--td-success-color-1);
  --td-mask-active: rgba(0, 0, 0, .8);
  --td-mask-disabled: rgba(255, 255, 255, .6);
  --td-bg-color-page: #ebeef2;
  --td-bg-color-container: #fff;
  --td-bg-color-container-hover: var(--td-gray-color-2);
  --td-bg-color-container-active: var(--td-gray-color-3);
  --td-bg-color-container-select: #fff;
  --td-bg-color-secondarycontainer: var(--td-gray-color-1);
  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
  --td-bg-color-secondarycontainer-active: var(--td-gray-color-3);
  --td-bg-color-component: var(--td-gray-color-2);
  --td-bg-color-component-hover: var(--td-gray-color-3);
  --td-bg-color-component-active: var(--td-gray-color-4);
  --td-bg-color-component-disabled: var(--td-gray-color-2);
  --td-bg-color-secondarycomponent: var(--td-gray-color-3);
  --td-bg-color-secondarycomponent-hover: var(--td-gray-color-4);
  --td-bg-color-secondarycomponent-active: var(--td-gray-color-5);
  --td-bg-color-specialcomponent: #fff;
  --td-text-color-primary: var(--td-font-gray-1);
  --td-text-color-secondary: var(--td-font-gray-2);
  --td-text-color-placeholder: var(--td-font-gray-3);
  --td-text-color-disabled: var(--td-font-gray-4);
  --td-text-color-anti: #fff;
  --td-text-color-brand: var(--td-brand-color-6);
  --td-text-color-link: var(--td-brand-color-6);
  --td-border-level-1-color: var(--td-gray-color-2);
  --td-component-stroke: var(--td-gray-color-2);
  --td-border-level-2-color: var(--td-gray-color-3);
  --td-component-border: var(--td-gray-color-3);
  --td-shadow-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .12);
  --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, .06), 0 5px 5px -3px rgba(0, 0, 0, .1);
  --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, .04), 0 8px 10px -5px rgba(0, 0, 0, .08);
  --td-shadow-inset-top: inset 0 0.5px 0 #e7eaef;
  --td-shadow-inset-right: inset 0.5px 0 0 #e7eaef;
  --td-shadow-inset-bottom: inset 0 -0.5px 0 #e7eaef;
  --td-table-shadow-color: rgba(0, 0, 0, .08);
  --td-scrollbar-color: rgba(0, 0, 0, .1);
  --td-scrollbar-hover-color: rgba(0, 0, 0, .3);
  --td-scroll-track-color: #d3b3b3;
}